<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            border: 1px solid #000;
        }

        .title {
            background-color: #f00;
        }

    </style>
</head>
<body>

<div id="app">
    <h1>{{ title }}</h1>
    <hr>
    <!--每个组件都是独立，数据都是自己的-->
    <mycom1></mycom1>
    <mycom1></mycom1>
    <mycom1></mycom1>
    <mycom1></mycom1>
    <mycom1></mycom1>

</div>

</body>
<script src="lib/vue.js"></script>

<script type="text/javascript">

    /*
    * 通过参照 elemenUI 和 vantUI 我们发现组件应该有：
    *
    * 1. 结构（长出来的样子） 必须有一个根节点 √
    * 2. 样式（美观）
    * 3. 数据（地址选择）
    * 4. 行为 （事件）
    * 5. 生命周期函数（和 Vue里面的生命周期函数一样）
    *
    * 一般更多的是把别人的组件拿过来，然后在二次封装成自己的组件。
    *
    * */

    /*定义组件，说白了就是用户自己扩充 HTML标签 。因为组件定义好后，调用形式类型 HTML标签的调用。只能在 vuejs 管理的区域使用*/
    /*
    * 参数1：组件名称 组件id
    * 参数2：组件对象，必传 template
    * */
    Vue.component('mycom1', {
        data(){
          // 组件里面的data要写成一个方法，方法的返回值就是组件的数据
          return {
              title: '我是组件数据'
          }
        },
        created(){
            console.log('created api');
        },
        mounted(){
            console.log('mounted ');
        },
        updated(){
            console.log('updated ');
        },
        methods: {
            clickHandler(event) {
                console.log('clickHandler', event);
                this.title = Math.random();
            }
        },
        template: `
            <div class="container">
                <div class="title">组件结构</div>
                <div style="background-color:gold;">组件结构</div>
                <p>{{ title }}</p>
                <button @click="clickHandler">点击我</button>
            </div>

        `
    });


    new Vue({
        el: '#app',
        data: {
            title: 'vuejs组件化开发！',
        }
    })

</script>

</html>
